<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title !text-sky-400">{{ title }}</text>
        </view>
        <view class="fixed w-screen h-16 bg-white drop-shadow bottom-0
        flex flex-row justify-center items-center gap-3">
            <uv-button class="w-32" type="primary" shape="circle" text="Detail" @click="goDetail"/>
            <uv-button class="w-32" type="success" shape="circle" text="Success" />
        </view>
    </view>
</template>

<script setup>
import {onMounted, nextTick} from 'vue'
import {useTransfer} from '@/hooks/useTransfer.js'
import {useCacheStore} from '@/hooks/useCacheStore.js'
import {cacheActions} from '@/hooks/defineCacheActions.js'
import {useUserStore} from "@/hooks/useUserStore";

const title = 'Index page'
const {transferTo} = useTransfer()
const goDetail = () => {
    transferTo('/pages/detail/detail', {id: 1, name: 'John'})
}

onMounted(async () => {
    const {isLogin, Login} = useUserStore()
    // if (!isLogin.value) await Login('800001', '12345678')

    const {dispatchCache} = useCacheStore()
    // const dict = await dispatchCache(cacheActions.getDicts, 'from_type')
    // console.log('from_type dict:', dict)

    await nextTick()
    // dict.push('abcd')
    // console.log('from_type dict after push:', dict)

    console.log('uvui color', uni.$uv)
})
</script>

<style>
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>
